<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_ES8-对象相关属性</title>
  <!-- 
  在 JavaScript 中，ES8（ECMAScript 2017）引入了一些新的特性和方法，特别是在对象相关属性方面。这些更新使得对象的操作更加灵活和高效。以下是 ES8 中与对象相关的主要特性和方法的总结说明。
  一、Object.values()
   1. 定义
  `Object.values()`  方法用于返回一个给定对象自身可枚举属性值的数组。
   2. 语法
  Object.values(obj);
   3. 示例
  const obj = { a: 1, b: 2, c: 3 };
  const values = Object.values(obj);
  console.log(values); // 输出: [1, 2, 3]

  二、Object.entries()
   1. 定义
  `Object.entries()`  方法用于返回一个给定对象自身可枚举属性的键值对数组。

   2. 语法
  Object.entries(obj);
   3. 示例
  const obj = { a: 1, b: 2, c: 3 };
  const entries = Object.entries(obj);
  console.log(entries); // 输出: [['a', 1], ['b', 2], ['c', 3]]
  三、Object.getOwnPropertyDescriptors()
   1. 定义
  `Object.getOwnPropertyDescriptors()`  方法用于返回一个对象自身所有可枚举和不可枚举属性的描述符。
   2. 语法
  Object.getOwnPropertyDescriptors(obj);
   3. 示例
  const obj = {
      a: 1,
      b: 2,
      get c() {
          return this.a + this.b;
      }
  };

  const descriptors = Object.getOwnPropertyDescriptors(obj);
  console.log(descriptors);
  /*
  输出:
  {
    a: { value: 1, writable: true, enumerable: true, configurable: true },
    b: { value: 2, writable: true, enumerable: true, configurable: true },
    c: { get: [Function: get c], set: undefined, enumerable: true, configurable: true }
  }
  */
  四、字符串的补充
  在 ES8 中， `String.prototype.padStart()`  和  `String.prototype.padEnd()`  方法也被引入，虽然它们不直接与对象相关，但它们可以用于处理字符串对象。

   1. String.prototype.padStart()
  用于在当前字符串的开头填充指定的字符，以达到给定的长度。

   2. 语法
  str.padStart(targetLength, padString);
   3. 示例
  const str = '5';
  console.log(str.padStart(2, '0')); // 输出: '05'
   4. String.prototype.padEnd()

  用于在当前字符串的结尾填充指定的字符，以达到给定的长度。

   5. 语法
  str.padEnd(targetLength, padString);
   6. 示例
  const str = '5';
  console.log(str.padEnd(2, '0')); // 输出: '50'

  五、总结
  - Object.values()：返回对象的所有可枚举属性值的数组。
  - Object.entries()：返回对象的所有可枚举属性的键值对数组。
  - Object.getOwnPropertyDescriptors()：返回对象所有属性的描述符，包括可枚举和不可枚举属性。
  - padStart() 和 padEnd()：用于字符串的填充，增强了字符串处理的灵活性。
  -->
</head>
<body>

  <script>
    // 1. Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同（区别在于for...in循环枚举原型链中的属性）。
    const obj = {
      name: '张三',
      age: 18,
      gender: '男'
    }
    console.log(Object.values(obj)); // [ '张三', 18, '男' ]

    // 2. Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for...in 循环还会枚举其原型链中的属性）。
    const entries = Object.entries(obj);
    console.log(entries); // [ [ 'name', '张三' ], [ 'age', 18 ], [ 'gender', '男' ] ]
    for (const [key, value] of entries) {
      console.log(key, value);
    }
    console.log(Object.entries(["abc", "cba"]))
    console.log(Object.entries("Hello"))

    // 3. Object.getOwnPropertyDescriptors() 方法返回指定对象所有自身属性的描述对象。属性描述对象是直接定义在对象上的，而不是从原型链上继承的。
    console.log(Object.getOwnPropertyDescriptors(obj));
    
  </script>
  
</body>
</html>